package me.victor.jetpackcompose

import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.Interaction
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsPressedAsState
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Person
import androidx.compose.material.icons.filled.Search
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material.icons.filled.Share
import androidx.compose.material.icons.filled.ShoppingCart
import androidx.compose.material3.BottomAppBar
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ScrollableTabRow
import androidx.compose.material3.Surface
import androidx.compose.material3.Tab
import androidx.compose.material3.TabPosition
import androidx.compose.material3.TabRowDefaults
import androidx.compose.material3.TabRowDefaults.tabIndicatorOffset
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.PlatformTextStyle
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.LineHeightStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.zIndex
import kotlinx.coroutines.flow.Flow
import kotlinx.coroutines.flow.emptyFlow
import kotlinx.coroutines.launch

/**
 * @author song.zheng
 * @create 2024/6/11
 * @description
 */
data class ButtonState(var text: String, var textColor: Color, var buttonColor: Color)

@Composable
fun ButtonState() {
    // 获取按钮的状态
    val interactionState = remember { MutableInteractionSource() }

    // 使用Kotlin的解构方法
    val (text, textColor, buttonColor) = when {
        interactionState.collectIsPressedAsState().value -> ButtonState(
            "Just Pressed",
            Color.Red,
            Color.Black
        )

        else -> ButtonState("Just Button", Color.White, Color.Red)
    }
    Button(
        onClick = { /*TODO*/ },
        interactionSource = interactionState,
        elevation = null,
        shape = RoundedCornerShape(50),
        colors = ButtonDefaults.buttonColors(
            containerColor = buttonColor,
        ),
        modifier = Modifier
            .width(IntrinsicSize.Min)
            .height(IntrinsicSize.Min)
    ) {
        Text(
            text = text, color = textColor
        )
    }
}

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun HorizontalPagerWithIndicator() {
    val tabs = listOf(
        TabItem("Home", Icons.Filled.Home),
        TabItem("Favorites", Icons.Filled.Favorite),
        TabItem("Profile", Icons.Filled.Person),
        TabItem("Add", Icons.Filled.Add),
        TabItem("ShoppingCart", Icons.Filled.ShoppingCart),
        TabItem("Share", Icons.Filled.Share),
        TabItem("Settings", Icons.Filled.Settings),
        TabItem("Search", Icons.Filled.Search)
    )
    val pagerState = rememberPagerState {
        tabs.size
    }
    val scope = rememberCoroutineScope()
    val bgColor = Color(0xFF1E76DA)

    Column {
        ScrollableTabRow(
            selectedTabIndex = pagerState.currentPage,
            modifier = Modifier
                .padding(10.dp)
                .clip(RoundedCornerShape(30.dp)),
            containerColor = bgColor,
            contentColor = Color.White,
            edgePadding = 0.dp,
            indicator = { tabPositions ->
                TabRowDefaults.SecondaryIndicator(
                    modifier = Modifier
                        .tabIndicatorOffset(tabPositions[pagerState.currentPage])
                        .fillMaxSize()
                        .padding(1.dp)
                        .clip(RoundedCornerShape(30.dp))
                        .zIndex(-1f),
                    color = Color.White
                )
//                CustomIndicator(tabPosition = tabPositions[pagerState.currentPage])
            },
            divider = {

            }
        ) {
            tabs.forEachIndexed { index, tab ->
                val contentColor by animateColorAsState(
                    targetValue = if (pagerState.currentPage == index) bgColor else Color.White,
                    animationSpec = tween(300),
                    label = "contentColor"
                )

                Tab(
                    selected = pagerState.currentPage == index,
                    onClick = {
                        scope.launch {
                            pagerState.animateScrollToPage(index)
                        }
                    },
                    modifier = Modifier.padding(horizontal = 8.dp),
                    interactionSource = NoRippleInteractionSource()
                ) {
                    Row(
                        horizontalArrangement = Arrangement.Center,
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        Icon(
                            imageVector = tab.icon,
                            contentDescription = tab.title,
                            modifier = Modifier.size(20.dp),
                            tint = contentColor
                        )
                        Text(
                            text = tab.title,
                            modifier = Modifier.padding(8.dp),
                            color = contentColor
                        )
                    }
                }
            }
        }

        HorizontalPager(
            state = pagerState,
            modifier = Modifier
                .fillMaxSize()
                .background(MaterialTheme.colorScheme.surface)
        ) { page ->
            Text(
                text = "成都${tabs[page].title}\n中文${tabs[page].title}".repeat(3),
                style = LocalTextStyle.current.merge(
                    TextStyle(
                        fontSize = 40.sp,
                        lineHeight = 50.sp,
                        platformStyle = PlatformTextStyle(
                            includeFontPadding = false
                        ),
                        lineHeightStyle = LineHeightStyle(
                            alignment = LineHeightStyle.Alignment.Center,
                            trim = LineHeightStyle.Trim.Both
                        )
                    )
                ),
                modifier = Modifier
                    .fillMaxSize()
                    .wrapContentSize(Alignment.Center)
                    .background(Color.Blue),
                textAlign = TextAlign.Center
            )
        }
    }
}

@Composable
fun CustomIndicator(tabPosition: TabPosition) {
    val width by animateDpAsState(
        targetValue = tabPosition.width,
        animationSpec = tween(300),
        label = "width"
    )
    val left by animateDpAsState(
        targetValue = tabPosition.left,
        animationSpec = tween(300),
        label = "left"
    )

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentSize(Alignment.BottomStart)
            .offset(left, 0.dp)
            .width(width)
            .height(60.dp)
            .background(color = Color.Red, shape = RoundedCornerShape(30.dp))
            .zIndex(-1f)
    )
}

data class TabItem(val title: String, val icon: ImageVector)

class NoRippleInteractionSource : MutableInteractionSource {
    override val interactions: Flow<Interaction> = emptyFlow()

    override suspend fun emit(interaction: Interaction) {

    }

    override fun tryEmit(interaction: Interaction) = true
}

@Composable
fun CustomBottomAppBar() {
    val bottoms = listOf(
        BottomItem("首页", Icons.Filled.Home),
        BottomItem("搜索", Icons.Filled.Search),
        BottomItem("购物车", Icons.Filled.ShoppingCart),
        BottomItem("分享", Icons.Filled.Share),
        BottomItem("我的", Icons.Filled.Person)
    )
    var selectedIndex by remember {
        mutableIntStateOf(0)
    }

    Column(modifier = Modifier.fillMaxSize()) {
        Surface(modifier = Modifier
            .fillMaxWidth()
            .weight(1f), color = Color.Red) {

        }
        BottomAppBar(
            modifier = Modifier
                .fillMaxWidth()
                .height(60.dp),
            containerColor = Color.White,
        ) {
            bottoms.forEachIndexed { index, bottom ->
                Column(
                    modifier = Modifier
                        .fillMaxHeight()
                        .weight(1f)
                        .clickable(
                            indication = null,
                            interactionSource = NoRippleInteractionSource()
                        ) { selectedIndex = index },
                    verticalArrangement = Arrangement.Center,
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    val color = if (selectedIndex == index) Color.Blue else Color.Black
                    Icon(
                        bottom.icon,
                        contentDescription = bottom.title,
                        modifier = Modifier.size(28.dp),
                        tint = color
                    )
                    Text(text = bottom.title, fontSize = 12.sp, color = color)
                }
            }
        }
    }
}

data class BottomItem(val title: String, val icon: ImageVector)



